/* base 层用于重置规则或应用于纯 HTML 元素的默认样式。 */
@tailwind base;
/* components 层用于你希望能够使用工具覆盖的基于类的样式 */
@tailwind components;
/* utilities 层用于小型、单一用途的类，这些类应始终优先于任何其他样式。 */
@tailwind utilities;
/*
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
/* @tailwind variants; */
/* layout里的样式 如果不使用,会被treeshaking */
@layer utilities {
  .rubber-animation {
    @apply hover:scale-110 transition-transform;
  }
  .rubber-animation-bigger {
    @apply hover:scale-150 transition-transform;
  }
  .nuxt-theme {
    @apply bg-green-400;
  }
  .pop-top {
    @apply hover:translate-y-[-2px] transition-transform duration-100 ease-out;
  }
}
/* 默认添加到prod */
/* .content-area {
  height: calc(100vh - theme(spacing.128));
} */
